<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Remote JSONP - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="../../../../js/lib/jquery-easyui-v1.5.1/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../../../js/lib/jquery-easyui-v1.5.1/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../demo.css">
		<script type="text/javascript" src="../../../../js/lib/jquery-easyui-v1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="../../../../js/lib/jquery-easyui-v1.5.1/jquery.easyui.min.js"></script>
	</head>

	<body>
		<h2>Remote JSONP</h2>
		<p>This sample shows how to use JSONP to retrieve data from a remote site.</p>
		<div style="margin:20px 0"></div>
		<div class="easyui-panel" style="width:100%;max-width:600px;padding:30px 60px;">
			<div>github name:<input type="text" name="" id="name" value="jquery" style="width: 100px;"/>
				<input type="button" name="search" id="search" value="search" />
			</div>
			<div style="margin-bottom:20px">
				<input id="ec" class="easyui-combobox" style="width:100%;" data-options="
					loader: myloader,
					mode: 'remote',
					valueField: 'id',
					textField: 'name',
					label: 'State:',
					labelPosition: 'top',
					formatter:formatter
					">
			</div>
		</div>
		<script>
			var myloader = function(param, success, error) {
				var q = param.q || '';
				if(q.length <= 2) {
					return false
				}
				$.ajax({
					url: 'https://api.github.com/search/repositories',
					dataType: 'jsonp',
					data: {
						q: q
					},
					success: function(data) {
						success(data.data.items);
					},
					error: function() {
						error.apply(this, arguments);
					}
				});
			}
			$('#search').on('click',e=>{
				var q = $('#name').val();
				var opts=$('#ec').combobox('options');
				opts.queryParams.q=q;
				$('#ec').combobox('reload');
			});
			function formatter(row) {
				var s=$('<div style="width: 250px;"></div>');
				s.append($('<span style="color:red;font-weight: bold;">'+row.name+'</span><br/>'));
				s.append($('<span style="color:dodgerblue;font-weight: bold;">language:'+row.language+'</span><br/>'));
				s.append($('<a style="color:#888;font-weight: bold;" target="_blank" href="'+row.clone_url+'">url:'+row.url+'</a>'));
				return s[0].outerHTML;
			}
		</script>
	</body>

</html>